<template>
    <div style="margin: 20px;">
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="5" style="margin-right: 20px;">
                    <Select v-model="studentNum" @on-clear="clearStudentNum()" filterable clearable placeholder="请选择学生...">
                        <Option v-for="item in studentList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </Col>
                <Col span="5" style="margin-right: 20px;">
                    <Select v-model="courseNum" filterable clearable placeholder="请选择课程...">
                        <Option v-for="item in courseList" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </Col>
                <Col span="2">
                    <Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button>
                </Col>
            </Row>
        </div>
        <!--列表model-->
        <div>
            <ul style="list-style: none">
                <li>
                    <Button type="primary" icon="plus-round" @click="insertCourse()">新建</Button>
                    <Button type="error" icon="trash-a" @click="del()">删除</Button>
                </li>
                <li>
                    <div style="padding: 10px 0;position: relative;">
                        <Spin fix v-if="loadingTable">
                            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                            <div>Loading</div>
                        </Spin>
                        <Table border :columns="scoreColumn" :data="scoreData" @on-selection-change="s=>{change(s)}"></Table>
                    </div>
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total
                              @on-change="e=>{pageSearch(e)}"></Page>
                    </div>
                </li>
            </ul>
        </div>
        <!--添加modal-->
        <Modal :mask-closable="false" :visible.sync="newModal" :loading="loading" v-model="newModal" width="600"
               title="新建" @on-ok="newOk('scoreNew')" @on-cancel="cancel(0)">
            <Form ref="scoreNew" :model="scoreNew" :rules="ruleNew" :label-width="80">
                <Row>
                    <Form-item label="学生:" prop="studentNum">
                        <Select v-model="scoreNew.studentNum" filterable clearable placeholder="请选择学生..." style="width: 90%">
                            <Option v-for="item in studentList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="所属班级:" prop="classNum">
                        <Select v-model="scoreNew.classNum" filterable clearable placeholder="请选择班级..." style="width: 90%">
                            <Option v-for="item in classList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="课程:" prop="courseNum">
                        <Select v-model="scoreNew.courseNum" filterable clearable placeholder="请选择课程..." style="width: 90%">
                            <Option v-for="item in courseList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="学年:" prop="schoolYear">
                        <Select v-model="scoreNew.schoolYear" filterable clearable placeholder="请选择学年..." style="width: 90%">
                            <Option v-for="item in schoolYearList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="学期:" prop="schoolPeriod">
                        <Select v-model="scoreNew.schoolPeriod" filterable clearable placeholder="请选择学期..." style="width: 90%">
                            <Option v-for="item in schoolPeriodList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="分数:" prop="score">
                        <Input v-model="scoreNew.score" number style="width: 90%"/>
                    </Form-item>
                </Row>
            </Form>
        </Modal>
        <!--修改modal-->
        <Modal :mask-closable="false" :visible.sync="modifyModal" :loading="loading" v-model="modifyModal" width="600"
               title="编辑" @on-ok="modifyOk('scoreModify')" @on-cancel="cancel(1)">
            <Form ref="scoreModify" :model="scoreModify" :rules="ruleModify" :label-width="80">
                <Row>
                    <Form-item label="学生:" prop="studentNum">
                        <Select v-model="scoreModify.studentNum" filterable clearable placeholder="请选择学生..." style="width: 90%">
                            <Option v-for="item in studentList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="所属班级:" prop="classNum">
                        <Select v-model="scoreModify.classNum" filterable clearable placeholder="请选择班级..." style="width: 90%">
                            <Option v-for="item in classList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="课程:" prop="courseNum">
                        <Select v-model="scoreModify.courseNum" filterable clearable placeholder="请选择课程..." style="width: 90%">
                            <Option v-for="item in courseList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="学年:" prop="schoolYear">
                        <Select v-model="scoreModify.schoolYear" filterable clearable placeholder="请选择学年..." style="width: 90%">
                            <Option v-for="item in schoolYearList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="学期:" prop="schoolPeriod">
                        <Select v-model="scoreModify.schoolPeriod" filterable clearable placeholder="请选择学期..." style="width: 90%">
                            <Option v-for="item in schoolPeriodList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                </Row>
                <Row>
                    <Form-item label="分数:" prop="score">
                        <Input v-model="scoreModify.score" number style="width: 90%"/>
                    </Form-item>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data() {
            const validateStudentNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择学生'));
                } else {
                    callback();
                }
            };
            const validateClassNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择班级'));
                } else {
                    callback();
                }
            };
            const validateCourseNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择课程'));
                } else {
                    callback();
                }
            };
            const validateSchoolYear = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择学年'));
                } else {
                    callback();
                }
            };
            const validateSchoolPeriod = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请选择学期'));
                } else {
                    callback();
                }
            };
            const validateScore = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('分数不能为空'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (value <= 0) {
                        callback(new Error('分数必须大于等于0'));
                    } else if(value > 150) {
                        callback(new Error('分数必须小于等于150'));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return {
                loadingTable:true,
                studentName:null,
                studentNum: 0,
                courseNum: 0,
                count: null,
                groupId: null,
                newModal: false,
                modifyModal: false,
                total: 0,
                loading: true,
                pageInfo: {
                    page: 0,
                    pageSize: 10,
                    studentNum: 0,
                    courseNum: 0
                },
                studentList: [],
                courseList: [],
                classList: [],
                schoolYearList: [
                    {
                        value: '1',
                        label: '上半学年'
                    },
                    {
                        value: '2',
                        label: '下半学年'
                    }
                ],
                schoolPeriodList: [
                    {
                        value: '1',
                        label: '期中'
                    },
                    {
                        value: '2',
                        label: '期末'
                    }
                ],
                /*score实体*/
                score: {
                    scoreId: null,
                    studentNum: null,
                    courseNum: null,
                    score: null,
                    studentName: null,
                    courseName: null,
                    classNum: null,
                    schoolYear: null,
                    schoolPeriod: null
                },
                /*用于添加的score实体*/
                scoreNew: {
                    scoreId: null,
                    studentNum: null,
                    courseNum: null,
                    score: null,
                    studentName: null,
                    courseName: null,
                    classNum: null,
                    schoolYear: null,
                    schoolPeriod: null
                },
                /*用于修改的score实体*/
                scoreModify: {
                    scoreId: null,
                    studentNum: null,
                    courseNum: null,
                    score: null,
                    studentName: null,
                    courseName: null,
                    classNum: null,
                    schoolYear: null,
                    schoolPeriod: null
                },
                /**********************变量定义end**********************/
                /**********************页面校验start**********************/
                /*新建验证*/
                ruleNew: {
                    studentNum: [
                        {validator: validateStudentNum, trigger: 'change'}
                    ],
                    classNum: [
                        {validator: validateClassNum, trigger: 'change'}
                    ],
                    courseNum: [
                        {validator: validateCourseNum, trigger: 'change'}
                    ],
                    schoolYear: [
                        {validator: validateSchoolYear, trigger: 'change'}
                    ],
                    schoolPeriod: [
                        {validator: validateSchoolPeriod, trigger: 'change'}
                    ],
                    score: [
                        {validator: validateScore, trigger: 'change'}
                    ]
                },
                /*修改验证*/
                ruleModify: {
                    studentNum: [
                        {validator: validateStudentNum, trigger: 'change'}
                    ],
                    classNum: [
                        {validator: validateClassNum, trigger: 'change'}
                    ],
                    courseNum: [
                        {validator: validateCourseNum, trigger: 'change'}
                    ],
                    schoolYear: [
                        {validator: validateSchoolYear, trigger: 'change'}
                    ],
                    schoolPeriod: [
                        {validator: validateSchoolPeriod, trigger: 'change'}
                    ],
                    score: [
                        {validator: validateScore, trigger: 'change'}
                    ]
                },
                /**********************页面校验end**********************/
                /**********************列表显示start**********************/
                /*生产类型表显示字段*/
                scoreColumn: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '学生姓名',
                        key: 'studentName',
                        align: 'center'
                    },
                    {
                        title: '所属班级',
                        key: 'className',
                        align: 'center'
                    },
                    {
                        title: '课程名称',
                        key: 'courseName',
                        align: 'center'
                    },
                    {
                        title: '学年',
                        key: 'schoolYear',
                        align: 'center',
                        render: (h, params) => {
                            let state = params.row.schoolYear == 1 ? "上半学年" : "下半学年";
                            let color = params.row.schoolYear == 1 ? "#3cc472" : "gray";
                            return h("span", {
                                    style: {
                                        color: color,
                                    }
                                },
                                state
                            );
                        }
                    },
                    {
                        title: '学期',
                        key: 'schoolPeriod',
                        align: 'center',
                        render: (h, params) => {
                            let state = params.row.schoolPeriod == 1 ? "期中" : "期末";
                            let color = params.row.schoolPeriod == 1 ? "#3cc472" : "gray";
                            return h("span", {
                                    style: {
                                        color: color,
                                    }
                                },
                                state
                            );
                        }
                    },
                    {
                        title: '分数',
                        key: 'score',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width:160,
                        render: (h, params) => {
                            let btnArr = [];
                            btnArr.push(
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        margin: '3px',
                                        color: '#2d8cf0',
                                        backgroundColor: '#ffffff',
                                        border: '1px solid #2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                        this.relationEdit(params.row)
                                        }
                                     }
                                }, '编辑'),
                            );
                            btnArr.push(
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        margin: '3px',
                                        color: '#ed3f14',
                                        backgroundColor: '#ffffff',
                                        border: '1px solid #ed3f14'
                                    },
                                    on: {
                                        click: () => {
                                            this.setSingleGroupId(params.row.scoreId);
                                            this.del();
                                        }
                                    }
                                 }, '删除')
                            );
                        return h('div', btnArr);
                        }
                    }
                ],
                /*生产类型表数据*/
                scoreData: []
                /**********************列表显示start**********************/
            }
        },
        mounted() {
            /*页面初始化调用方法*/
            this.getTable(this.pageInfo);
            this.getAllStudent();
            this.getAllCourse();
            this.getAllClass();
        },
        methods: {
            /*pageInfo实体初始化*/
            initPageInfo() {
                this.pageInfo.page = 0;
                this.pageInfo.pageSize = 10;
                this.pageInfo.studentNum = 0;
                this.pageInfo.courseNum = 0;
            },
            /*score实体初始化*/
            initScore() {
                this.score.scoreId = null;
                this.score.studentNum = null;
                this.score.courseNum = null;
                this.score.score = null;
                this.score.studentName = null;
                this.score.courseName = null;
                this.score.classNum = null;
                this.score.schoolYear = null;
                this.score.schoolPeriod = null;
            },
            /*scoreNew实体初始化*/
            initScoreNew(){
                this.scoreNew.scoreId = null;
                this.scoreNew.studentNum = null;
                this.scoreNew.courseNum = null;
                this.scoreNew.score = null;
                this.scoreNew.studentName = null;
                this.scoreNew.courseName = null;
                this.scoreNew.classNum = null;
                this.scoreNew.schoolYear = null;
                this.scoreNew.schoolPeriod = null;
            },
            /*scoreModify实体初始化*/
            initScoreModify(){
                this.scoreModify.scoreId = null;
                this.scoreModify.studentNum = null;
                this.scoreModify.courseNum = null;
                this.scoreModify.score = null;
                this.scoreModify.studentName = null;
                this.scoreModify.courseName = null;
                this.scoreModify.classNum = null;
                this.scoreModify.schoolYear = null;
                this.scoreModify.schoolPeriod = null;
            },
            /*score设置*/
            scoreSet(e) {
                this.score.scoreId = e.scoreId;
                this.score.studentNum = e.studentNum;
                this.score.courseNum = e.courseNum;
                this.score.score = e.score;
                this.score.studentName = e.studentName;
                this.score.courseName = e.courseName;
                this.score.classNum = e.classNum;
                this.score.schoolYear = e.schoolYear;
                this.score.schoolPeriod = e.schoolPeriod;
            },
            /*scoreNew设置*/
            scoreNewSet(e){
                this.scoreNew.scoreId = e.scoreId;
                this.scoreNew.studentNum = e.studentNum;
                this.scoreNew.courseNum = e.courseNum;
                this.scoreNew.score = e.score;
                this.scoreNew.studentName = e.studentName;
                this.scoreNew.courseName = e.courseName;
                this.scoreNew.classNum = e.classNum;
                this.scoreNew.schoolYear = e.schoolYear;
                this.scoreNew.schoolPeriod = e.schoolPeriod;
            },
            /*scoreModify设置*/
            scoreModifySet(e){
                this.scoreModify.scoreId = e.scoreId;
                this.scoreModify.studentNum = e.studentNum;
                this.scoreModify.courseNum = e.courseNum;
                this.scoreModify.score = e.score;
                this.scoreModify.studentName = e.studentName;
                this.scoreModify.courseName = e.courseName;
                this.scoreModify.classNum = e.classNum;
                this.scoreModify.schoolYear = e.schoolYear;
                this.scoreModify.schoolPeriod = e.schoolPeriod;
            },
            /*获取列表数据*/
            getTable(e) {
                this.loadingTable = true;
                this.axios({
                    method: 'get',
                    url: '/score',
                    params: {
                        page: e.page,
                        pageSize: e.pageSize,
                        studentNum: e.studentNum,
                        courseNum: e.courseNum
                    }
                }).then(function (response) {
                    this.scoreData = response.data.data;
                    this.total = response.data.totalCount;
                    this.loadingTable = false;
                    this.groupId = null;
                }.bind(this)).catch(function (error) {
                    //alert(error);
                });
            },
            /*搜索按钮点击事件*/
            search() {
                this.pageInfo.studentNum = this.studentNum;
                this.pageInfo.courseNum = this.courseNum;
                this.getTable(this.pageInfo);
            },
            /*分页点击事件*/
            pageSearch(e) {
                this.pageInfo.page = e - 1;
                this.getTable(this.pageInfo);
            },
            /*新建点击触发事件*/
            insertCourse() {
                this.$refs['scoreNew'].resetFields();
                this.newModal = true;
                this.scoreData.sort();
                this.count = 0;
                this.groupId = null;
            },
            /*新建modal的newOk点击事件*/
            newOk(scoreNew) {
                this.$refs[scoreNew].validate((valid) => {
                    if (valid) {
                        this.initScore();
                        this.scoreSet(this.scoreNew);
                        this.axios({
                            method: 'post',
                            url: '/score',
                            data: this.score
                        }).then(function (response) {
                            if (response.data && response.data.msg == 'success') {
                                this.$Message.info('新建成功');
                            }
                            this.initScore();
                            this.getTable(this.pageInfo);
                        }.bind(this)).catch(function (error) {
                            //alert(error);
                        });
                        this.newModal = false;
                    } else {
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*点击修改时*/
            relationEdit(e){
                this.$refs['scoreModify'].resetFields();
                this.scoreModifySet(e);
                this.modifyModal = true;
            },
            /*修改modal的modifyOk点击事件*/
            modifyOk(scoreModify) {
                this.$refs[scoreModify].validate((valid) => {
                    if (valid) {
                        this.initScore();
                        this.scoreSet(this.scoreModify);
                        this.axios({
                            method: 'put',
                            url: '/score',
                            data: this.score
                        }).then(function (response) {
                            if (response.data && response.data.msg == 'success') {
                                this.$Message.info('修改成功');
                            }
                            this.initScoreModify();
                            this.getTable(this.pageInfo);
                        }.bind(this)).catch(function (error) {
                            //alert(error);
                        });
                        this.modifyModal = false;
                    } else {
                        this.$Message.error('表单验证失败!');
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 1000);
                    }
                })
            },
            /*modal的cancel点击事件*/
            cancel(val) {
                if (val == 0) {
                    this.$Message.info('新增操作取消');
                }
                if (val == 1) {
                    this.$Message.info('编辑操作取消');
                }

            },
            /*table选择后触发事件*/
            change(e) {
                this.setGroupId(e);
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e) {
                this.groupId = [];
                this.count = e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].scoreId);
                }
            },
            setSingleGroupId(e){
                this.groupId = [];
                this.count = 1;
                this.groupId.push(e);
            },
            /*删除table中选中的数据*/
            del() {
                if(this.groupId != null && this.groupId.length > 0){
                    this.$Modal.confirm({
                        title: '信息确认',
                        content: '<p>您确定要删除吗?</p>',
                        onOk: () => {
                            this.axios({
                                method: 'delete',
                                url: '/score',
                                data: this.groupId
                            }).then(function (response) {
                                if (response.data && response.data.msg == 'success') {
                                    this.$Message.info('删除成功');
                                }
                                this.getTable(this.pageInfo);
                                this.groupId = null;
                                this.count = 0;
                            }.bind(this)).catch(function (error) {
                                //alert(error);
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('删除记录取消!');
                        }
                    });
                }else{
                    this.$Message.info('至少选择一条记录!');
                }
            },
            getAllCourse() {
                this.axios({
                    method: 'get',
                    url: '/course/getAllCourses'
                }).then(function (response) {
                    this.courseList = [];
                    var listTemp = response.data;
                    for (var i = 0; i < listTemp.length; i++) {
                        this.courseList.push({
                            "value": listTemp[i].courseNum,
                            "label": listTemp[i].courseName
                        });
                    }
                }.bind(this)).catch(function (error) {
                    //alert(error);
                });
            },
            getAllStudent(){
                this.axios({
                    method: 'get',
                    url: '/student/getAllStudents'
                }).then(function (response) {
                    this.studentList = [];
                    var listTemp = response.data;
                    for (var i = 0; i < listTemp.length; i++) {
                        this.studentList.push({
                            "value": listTemp[i].studentNum,
                            "label": listTemp[i].studentName
                        });
                    }
                }.bind(this)).catch(function (error) {
                    //alert(error);
                });
            },
            getAllClass() {
                this.axios({
                    method: 'get',
                    url: '/class/getAllClasses'
                }).then(function (response) {
                    this.classList = [];
                    var listTemp = response.data;
                    for (var i = 0; i < listTemp.length; i++) {
                        this.classList.push({
                            "value": listTemp[i].classNum,
                            "label": listTemp[i].className
                        });
                    }
                }.bind(this)).catch(function (error) {
                    //alert(error);
                });
            }
        }
    }
</script>
